<!-- SectionInfo -->
<template>
  <div class="section-info">
    <div class="section-info-header">
      <div class="section-info-header-left">
        <div class="title">{{ title }}</div>
      </div>
      <div class="section-info-header-right"></div>
    </div>
    <div class="section-info-main">
      <ul class="content">
        <li
          class="item"
          :class="{ edit: !readonly }"
          v-for="(item, index) in data"
          :key="index"
        >
          <div v-if="readonly" class="label">{{ item.label }}</div>
          <div v-if="readonly" class="value">
            <input type="text" v-model="item.value" readonly />
          </div>
          <template v-if="!readonly" :class="{ 'md-invalid': isError }">
            <md-field
              v-if="item.type == 'input'"
              :class="{ 'md-invalid': isError }"
            >
              <label>{{ item.label }}</label>
              <md-input v-model="item.value"></md-input>
               <span class="md-error" v-if="item.showError">
                {{ item.errorText }}
              </span>
            </md-field>
            <md-field v-if="item.type == 'select'">
                <md-select
                  v-model="item.value"
                  name=""
                  id=""
                  :placeholder="item.label"
                >
                  <md-option
                    v-for="(subItem, subIndex) in item.selectData"
                    :key="subIndex"
                    :value="subItem"
                    >{{ subItem }}</md-option
                  >
                </md-select>
              <span class="md-error" v-if="item.showError">
                {{ item.errorText }}
              </span>
            </md-field>
          </template>
        </li>
      </ul>
      <i v-if="iconEdit" class="iconfont iconedit" @click="editStaff"></i>
    </div>
    <div v-if="$slots.footer" class="section-info-bottom gg_dialog">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "SectionInfo",
  data() {
    return {
      staffAdd: require("@/assets/images/menu/staff_add.svg"),
      staffDelete: require("@/assets/images/menu/staff_delete.svg"),
    };
  },
  props: {
    title: String,
    data: {
      type: Array,
      default: [],
    },
    iconEdit: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    isError: function () {
      return this.validate();
    },
  },
  methods: {
    editStaff() {
      this.$emit("update:readonly", false);
    },
    validate() {
      let isError = null;
      try {
        this.data.forEach((item) => {
          if (item.type == "input") {
            item.showError = !item.reg.test(item.value);
          } else if (item.type == "select") {
            item.showError = item.value == "";
          }
          isError = item.showError;
          if (item.showError) {
            // 只要有一个不符合条件就终止循环,跳出循环体
            throw Error();
          }
        });
      } catch (error) {}
      return isError;
    },
  },
  created() {},
};
</script>
<style lang='less' scoped>
.section-info {
  min-height: 132px;
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  //   display: flex;
  //   flex-direction: column;
  background-color: #fff;
  &-header {
    height: 68px;
    padding: 20px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e0e0e0;
    &-left {
      display: flex;
      align-items: center;
      .title {
        font-family: OpenSans-Bold;
        font-size: 22px;
        color: #202124;
      }
    }
    &-right {
    }
  }
  &-main {
    position: relative;
    padding: 20px;
    // margin: 20px 0;
    color: #202124;
    font-family: Roboto;
    font-size: 14px;
    overflow-y: auto;
    &:hover {
      background-color: #f2f2f2;
    }
    .content {
      display: flex;
      flex-wrap: wrap;
    }
    .item {
      display: flex;
      width: 50%;
      margin-bottom: 22px;
      &.edit {
        padding-right: 20px;
      }
      .label {
        flex-basis: 284px;
      }
      .value {
        flex-basis: 316px;
        input {
          border: 0;
          outline: none;
          background: none;
          &.border-bottom {
            border-bottom: 1px solid #ccc;
          }
        }
      }
    }

    .iconedit {
      cursor: pointer;
      position: absolute;
      top: 20px;
      right: 20px;
    }
  }
  &-bottom {
    padding: 20px;
    display: flex;
    flex-direction: row-reverse;
  }
}
</style>